
/**
 * @date: 2021-10-20 09:31
 * @author: 李争争
 * @description: 内容说明:
 *
 * 什么是防抖？
 *
 *      答：触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间。（当你频繁触发后，n秒内只执行一次）
 *
 *
 *
 * 防抖可以用在什么地方？
 *
 *      答：1. 登录、发短信等按钮避免用户点击太快，以致于发送了多次请求，需要防抖。
 *          2. 调整浏览器窗口大小时，resize 次数过于频繁，造成计算过多，此时需要一次到位，就用到了防抖。
 *          3. 文本编辑器实时保存，当无任何更改操作一秒后进行保存。
 *          4. search搜索联想，用户在不断输入值时，用防抖来节约请求资源。
 *
 *  如何实现防抖？
 *
 *      思路：每次触发事件时都取消之前的延时调用方法，多次调用函数只返回是最后一次调用的结果。
 *
 *            (代码实现重在清零 clearTimeout。防抖可以比作等电梯，只要有一个人进来，就需要再等一会儿。)
 *
 *           （防抖函数又可以分为"非立即执行版"和"立即执行版"。）
 */

/**
 * @description: 方法说明：被频繁触发的函数
 * @method 方法名: printFn
 * @param { String } 参数名 参数说明
 * @return { Boolean } 返回值说明
 */
function printFn() {
    console.log(Math.random());
}

/**
 * @description: "非立即执行版"防抖函数
 * @method debounce
 * @param { fn, wait } 参数名 参数说明 fn:被频繁触发的函数, wait:延时时长
 * @return { Boolean } 返回值说明
 */

function debounce(fn, wait) {
    // 定义一个空变量用来接收定时器
    let timer = null;
    return function () {
        // 每次走进来判断此时如果有定时器那么就清理定时器
        if (timer !== null) clearTimeout(timer);
        // 设置定时器
        timer = setTimeout(fn, wait);
    };
}

// 窗口下滑是可以体现"非立即执行版"防抖函数
window.addEventListener('click', debounce(printFn, 1000));

/**
 * @description: "立即执行版"防抖函数
 * @method 方法名
 * @param  { fn, wait } 参数名, 参数说明: fn:被频繁触发的函数, wait:延时时长
 * @return { Boolean } 返回值说明
 */

function nowDeBounce(fn, wait) {
    // 定义一个空变量用来接收定时器
    let timer = null;
    return function () {
        // 每次走进来判断此时如果有定时器那么就清理定时器
        if (timer !== null) clearTimeout(timer);
        //
        const callNow = !timer;
        timer = setTimeout(() => {
            timer = null;
        }, wait);
        if (callNow) fn();
    };
}

// 鼠标点击时可以体现"立即执行版"防抖函数
window.addEventListener('scroll', nowDeBounce(printFn, 1000));



function debounce(func,wait){
    
}